<template>
	<view class="mainbgc" v-if="pageshow">
		<view class="all">
			<!-- <u-swiper :list="dataAll.images_text" height="300"></u-swiper> -->
			<view class="section">
				<view class="message">
					<view class="word_weight">{{dataAll.ckmj}}㎡{{dataAll.ckitem.name}}</view>
					<view class="flexleft message_biao">
						<view class=" location"></view>
						<view class="diqu">{{dataAll.cityinfo}}</view>
						<view class="word_bluer">距我{{kmUnit(Number(dataAll.distance))}}</view>
					</view>
				</view>
			</view>
			<!-- 中间部分 -->
			<view class="section">
				<view class="nav flexleft flexbetween">
					<view class="one">
						<view class="word_black">{{dataAll.ckmj}}</view>
						<view class="cangku word_greys">仓库面积</view>
						<view class="word_greys m">（㎡）</view>
					</view>
					<view class="one">
						<view class="word_red">{{dataAll.cszj}}</view>
						<view class="chushou word_greys">价格预算</view>
						<view class="word_greys m">（元）</view>
					</view>
				</view>
			</view>
			<!--  -->
			<view class="section">
				<view>
					<view class="message">
						<view class="text_weight">基本信息</view>
						<view class="flexbetween message_cangku">
							<view class="message_left">需求类型</view>
							<view class="message_right">{{dataAll.ckitem.name}}</view>
						</view>
						<view class="flexbetween message_cangku">
							<view class="message_left">需求类别</view>
							<view class="message_right">{{dataAll.item.name}}</view>
						</view>
						<view class="flexbetween message_cangku">
							<view class="message_left">存放货物</view>
							<view class="message_right">{{dataAll.cfhy}}</view>
						</view>
						<view class="flexbetween message_cangku">
							<view class="message_left">启动时间</view>
							<view class="message_right">{{dataAll.qdzq}}</view>
						</view>
						<view class="flexbetween message_cangku">
							<view class="message_left">使用周期</view>
							<view class="message_right">{{dataAll.syzq}}</view>
						</view>
					</view>
					<!--  -->
					<view class="facility">
						<view class="text_weight">需求说明</view>
						<view class="flexbetween message_cangku">
							<view class="message_left">建筑要求</view>
							<view class="message_right">{{dataAll.jzjg}}</view>
						</view>
						<view class="flexbetween message_cangku">
							<view class="message_left">地坪要求</view>
							<view class="message_right">{{dataAll.dpgn}}</view>
						</view>
						<view class="flexbetween message_cangku">
							<view class="message_left">其他要求</view>
							<view class="message_right">{{dataAll.qtyq}}</view>
						</view>
					</view>
					<!--  -->
					<view class="facility">
						<view class="text_weight">补充说明</view>
						<view class="facility_zi">{{dataAll.bcsm}}</view>
					</view>
				</view>
			</view>
			<!-- footer -->
			<view class="footer flexbetween">
				<view class="flexleft">

					<view class="">
						<button open-type="share" class="footer_stars">
							<view class="share"></view>
							<view class=" share_zi">分享</view>
						</button>
					</view>
					<view class="footer_star" @click="collect">
						<!-- 已收藏 图片-->
						<view class="collect_star flexcolumn" v-show="dataAll.is_collect"></view>
						<view class="star flexcolumn " v-show="!dataAll.is_collect"></view>
						<view class="collect">收藏</view>
					</view>
				</view>
				<view class="flexleft footer_right" @click="phone(dataAll.mobile)">
					<view class="phones">拨打电话</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				list1: [{
					name: '仓库详情',
				}, {
					name: '设施信息',
				}, {
					name: '园区详情'
				}, {
					name: '仓库简介'
				}],
				listid: 2,
				dataAll: {},
				lat: "",
				lng: "",
				pageshow:false
			}
		},
		onLoad(options) {
			this.listid = options.id
			this.getlocation()
		},
		onShow() {
			let _this = this
			if (!httpRequest.checkIsLogin()) {
				_this.is_login = false
			}
		},
		methods: {
			onShareAppMessage() {
				return {
					title: this.dataAll.ckmj + "㎡" + this.dataAll.ckitem.name,
					path: "/pages/index/cangchuxqxq?id=" + this.listid+ "&invite_code=" + uni.getStorageSync(						"invite_code"),
				}
			},
			// 小程序获取当前位置信息
			getlocation() {
				let _this = this
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: function(res) {
						//逆地址解析  坐标转地址信息
						_this.lat = res.latitude
						_this.lng = res.longitude
						_this.init()
					}
				});
			},
			init() {
				httpRequest.request('/api/cc/detail', 'GET', {
					id: this.listid,
					lat: this.lat,
					lng: this.lng
				}, false, false, true).then(res => {
					this.pageshow=true
					if (res.code == 1) {
						this.dataAll = res.data
					}
				})
			},
			// 收藏
			collect() {
				httpRequest.request('/api/cc/addCcCollect', 'GET', {
					id: this.listid,
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.init()
					}
				})
			},
			phone(p) {
				uni.makePhoneCall({
					phoneNumber: p.toString()
				}).catch((e) => {
				})
			},
			kmUnit(m) {
				var v;
				if (typeof m === 'number' && !isNaN(m)) {
					if (m >= 1000) {
						v = (m / 1000).toFixed(2) + 'km'
					} else {
						v = m + 'm'
					}
				} else {
					v = '0m'
				}
				return v;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.share {
		width: 32rpx;
		height: 32rpx;
		background-size: 100% 100%;
	}

	.sharebox {
		// height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	/deep/.u-tabs__wrapper__nav__item {
		//平均分配
		flex: 1;
	}

	.all {
		padding-bottom: 200rpx;
	}

	.header {
		height: 437rpx;
		width: 100%;
		background-size: 100% 100%;
	}

	.section {
		padding: 30rpx 24rpx 0rpx 24rpx;
	}

	.message {
		padding: 30rpx 30rpx;
		background-color: #fff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.nav {
		background-color: #fff;
		padding: 30rpx 80rpx 30rpx 80rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.facility {
		padding: 30rpx 30rpx;
		background-color: #fff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-top: 30rpx;
	}

	.diqu {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		padding-right: 27rpx;
	}

	.cangku {
		text-align: center;
		margin-top: 17rpx;
	}

	.keshou {
		text-align: center;
		margin-top: 17rpx;
	}

	.chushou {
		text-align: center;
		margin-top: 17rpx;
	}

	.one {
		text-align: center;
	}

	.m {
		padding-top: 2rpx;
	}

	.message_biao {
		padding-top: 30rpx;
	}

	.message_cangku {
		padding-top: 30rpx;
	}

	.message_left {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.message_right {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
	}

	.facility_zi {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		padding-top: 30rpx;
	}

	.footer {
		width: 100%;
		box-sizing: border-box;
		position: fixed;
		bottom: 0rpx;
		background-color: #fff;
		padding: 30rpx 46rpx;
		padding-bottom: 57rpx;
	}

	.footer_stars {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

	}

	.footer_star {
		padding-left: 66rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.phones {
		background: #228DFF;
		border-radius: 13rpx 13rpx 13rpx 13rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		padding: 21rpx 42rpx 21rpx 43rpx;
	}

	.collect {
		margin-top: 13rpx;
	}

	.share_zi {
		margin-top: 13rpx;
		line-height: 40rpx;
	}
</style>